<template>
  <view class="good-list">
    <view v-for="(item, index) in list" :key="index" class="u-form-item-item">
      <view class="file-warp">
        <view class="file-warp-item">
          <u-image
            :src="item.attachmentFileUrl + '&width=80'"
            border-radius="10"
            class="item-image"
            height="150rpx"
            width="150rpx"
            @click="previewImage(item.attachmentFileUrl, item.imageList)"
          ></u-image>
          {{$t('申请附件')}}
        </view>
        <view class="file-warp-item">
          <u-image
            :src="item.useFileUrl + '&width=80'"
            border-radius="10"
            class="item-image"
            height="150rpx"
            width="150rpx"
            @click="previewImage(item.useFileUrl, item.imageList)"
          ></u-image>
          {{$t('用印图片')}}
        </view>
        <view class="file-warp-item">
          <u-image
            :src="item.auditorFileUrl + '&width=80'"
            border-radius="10"
            class="item-image"
            height="150rpx"
            width="150rpx"
            @click="previewImage(item.auditorFileUrl, item.imageList)"
          ></u-image>
          {{$t('审计图片')}}
        </view>
      </view>
      <u-section :bold="false" :show-line="false" class="file-warp-title" :title="`${$t('图文相似度')}:`">
        <view slot="right">
          <u-tag
            :text="item.ocrRatio ? Number(item.ocrRatio * 100).toFixed(2) + '%' : '0'"
            :type="computedOcrRatio(item.ocrRatio)"
            size="mini"
            style="margin-right: 20rpx"
          ></u-tag>
          <text style="color: #0066cc" @click="navigetTo(item)">{{$t('查看更多')}}>></text>
        </view>
      </u-section>
      <u-section
        :arrow="false"
        :bold="false"
        :show-line="false"
        :sub-title="item.useTime"
        class="file-warp-title"
        :title="`${$t('用印日期')}:`"
      ></u-section>
      <u-section
        v-if="item.handlerName"
        :arrow="false"
        :bold="false"
        :show-line="false"
        :sub-title="item.handlerName"
        class="file-warp-title"
        :title="`${$t('审核人')}:`"
      ></u-section>
      <u-section
        v-if="item.handleStatus"
        :arrow="false"
        :bold="false"
        :show-line="false"
        class="file-warp-title"
        :title="`${$t('审核结果')}:`"
      >
        <view slot="right">
          <u-tag
            :text="item.handleStatus === 0 ? $t('通过') : $t('驳回')"
            :type="item.handleStatus === 0 ? 'success' : 'error'"
            size="mini"
          ></u-tag>
        </view>
      </u-section>
      <u-section
        v-if="item.handleResult"
        :arrow="false"
        :bold="false"
        :show-line="false"
        :sub-title="item.handleResult"
        class="file-warp-title"
        :title="`${$t('审核建议')}:`"
      ></u-section>
      <u-section
        v-if="item.handleTime"
        :arrow="false"
        :bold="false"
        :show-line="false"
        :sub-title="item.handleTime"
        class="file-warp-title"
        :title="`${$t('审核时间')}:`"
      ></u-section>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo', 'api']),
    computedOcrRatio() {
      return (ocrRatio) => {
        if (ocrRatio >= 0.85) {
          return 'success'
        } else if (ocrRatio >= 0.75) {
          return 'warning'
        } else if (ocrRatio >= 0.65) {
          return 'info'
        } else {
          return 'error'
        }
      }
    }
  },
  props: {
    list: {
      type: [Array],
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    navigetTo(item) {
      uni.navigateTo({
        url: '../contrastOcr/contrastOcr?data=' + encodeURIComponent(JSON.stringify(item))
      })
    },
    previewImage(url, imageList) {
      // 预览图片
      uni.previewImage({
        urls: imageList,
        current: url,
        longPressActions: {
          itemList: [this.$t('保存图片')],
          success: (data) => {
            let req = {
              fileUrl: url
            }
            this.$lizhao.download.save(req, 'fileUrl', this.userInfo.token)
          },
          fail: (err) => {
            //console.log(err.errMsg);
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.good-list {
  .u-form-item-item {
    padding: 10rpx 20rpx;

    .file-warp {
      display: flex;

      .file-warp-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
      }
    }

    .file-warp-title {
      margin-top: 16rpx;
    }
  }
}
</style>
